<template>
<transition
name="bounce rotate"
enter-active-class="fadeIn" leave-active-class="bounceOutRight">
  <div class="right-bar" v-if="visible">
     <div class="header" >
       {{ point.pointName }}
        视频监控
       <div class="close" @click="close">
        <icon-svg name="xiangyou"></icon-svg>
       </div>
     </div>
     <div class="body">
          <main-video 
            v-if="appkey"
            :playMode="0"
            layout="1x2"
            id="video1"
            ref="video1"
            swfHeight="300"
            swfWidth="550"
            :ichannelId="ichannelId"
            :appkey="appkey"
            :secret="secret"
            :port="port"
            :ip="ip" />
     </div>
  </div>
</transition>  
</template>
<script>
import MainVideo from '../../../components/video';
export default {
  props: {
    point: {
      type: Object,
      default: () => {}
    },
    visible: {
      type: Boolean,
      default: true
    }
  },
  components: {
    MainVideo
  },
  watch: {
    'point.pointCode'(pointCode) {
      if (pointCode) {
        // this.appkey = '';

        this.getVideoList().then(_ => {
          this.ichannelId = this.videoList.map(v => v.ichannelId);
          this.$refs.video1.startpreview();
          // this.videoList.forEach(item => {
          //   this.$refs.video1.manualpreview(item.ichannelId);
          // });
        });
      }
    }
  },
  data() {
    return {
      show: true,
      showTaskLayer: false,
      list: [],
      videoList: [],
      appkey: '',
      secret: '',
      ip: '',
      port: '',
      ichannelId: []
    };
  },
  created() {

  },
  mounted() {
    this.getVideoInfo();
  },
  methods: {
    close() {
      this.$refs.video1.closeWindow().then(_ => {
        this.$emit('update:visible', false);
      });
    },
    getVideoList() {
      const params = {
        url: `/api/ems/video/list`,
        type: 'post',
        params: {
          pointCode: this.point.pointCode,
          videoName: ''
        }
      };
      return new Promise((resolve, reject) => {
        this.$ajax(params).then(resp => {
          const { result, rows } = resp;
          if (result) {
            this.videoList = rows;
          }
          resolve();
        });
      });
    },
    getVideoInfo() {
      const params = {
        url: `/api/ems/video/get`,
        type: 'post',
        params: {
        }
      };
      this.$ajax(params).then(resp => {
        const { result, data } = resp;
        if (result) {
          this.appkey = data.accessName;
          this.secret = data.accessPwd;
          this.port = data.videoPort;
          this.ip = data.videoAddress;
        }
      });
    },
    getDataList() {
      const params = {
        url: `/api/ems/task/list/current`,
        type: 'post',
        params: {}
      };
      this.$ajax(params).then(resp => {
        const { result, rows } = resp;
        if (result) {
          this.list = rows;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.right-bar{
    position: absolute;
    top: 50px;
    right: 20px;
    z-index: 999;
    background: url('/static/images/base/rightbg.png') no-repeat;
    background-size:100% 100%;  
    // display: flex;
    width: 550px;
    // height: 620px;
    // background: white;
    // border-radius: 2px;
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .header{
      height: 50px;

      font-weight: 700;
      font-size: 18px;
      color: #FFFFFF;
      line-height: 50px;
      padding-left: 10px;
      .close{
        position: absolute;
        right: 34px;
        top: 30px;
        display: flex;
        cursor: pointer;
      }
    }
    .body{
      height: 300px;
      // background: #061925;
      border-radius: 2px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      overflow-y: auto;
      .pointname{
        text-align: center;
        color: white;
        font-size: 17px;
        padding: 10px;
      }
      .task-item{
        height: 70px;
        background: #042f56;
        margin-bottom: 5px;
        padding: 7.5px 20px;
      }
      .info{
        display: flex;
        justify-content: space-between;
        color:white;
        line-height: 20px;
      }
      .member{
       font-weight: 400;
       color: #00CCFF;
      }
      .data{
        display: flex;
        justify-content: space-between;
        color:white;
        line-height: 20px;
      }
    }
    // .bottom{
    //     height: 36px;
    // }
}
</style>